import  React, { useEffect, useState } from 'react'
import { View, Image, Swiper, SwiperItem  } from '@tarojs/components'

import ImgLaoHu from "@/assets/laohu.jpeg";
import './index.scss'

// 样式数据类型
type STYLE_CHILD = {
  pagePadding: VALUE,
  cmpUpperPadding: VALUE,
  cmpLowerPadding: VALUE,
  cmpRadius: VALUE,
  cmpBackground?: VALUE,
}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}

type IMG_CHILD = {
  imgPath?:  VALUE,
  jumpPath?:  VALUE
}

type IMG_VALUE = {
  child: IMG_CHILD,
  label: string,
  type: string
}

interface Props {
  styles: STYLE;
  // value: IMG_VALUE;
};

// 做一个数据个映射
const styleTable = {
  pageTopBottomPadding: "pageTopBottomPadding",
  pageLeftRightPadding: "pageLeftRightPadding",
  cmpRadius: "borderRadius",
  cmpBackground: "backgroundColor",
}

const HeBanner = (props: any) => {
  const { styles, attrs, list} = props;
  const [comStyle, setComStyle] = useState({});
  const [inStyle, setInStyle] = useState({});
  const [isAuto, setAuto] = useState(false);
  const [isLoop, setLoop] = useState(false);
  const [isVertical, setVertical] = useState(false);
  const [isDots, setDots] = useState(false);


  const handleStyle = (child, model) => {
    let objCom = {};
    let objInCom = {};
    for (let key in child) {
      const element = child[key];
      if( styleTable[key] == 'backgroundColor' ) {
        objCom[styleTable[key]] = element.value;
      } else if(styleTable[key] == 'pageTopBottomPadding') {
        objCom["paddingTop"] = element.value + 'px';
        objCom["paddingBottom"] = element.value + 'px';
      } else if(styleTable[key] == 'pageLeftRightPadding') {
        objCom["paddingLeft"] = element.value + 'px';
        objCom["paddingRight"] = element.value + 'px';
      }
      else {
        objInCom[styleTable[key]] = element.value + 'px';
      }
    }
    return {objCom, objInCom};
  }

  const handleAttrs = (child: any) => {
    for(let key in child) {
      const elem = child[key];
      if(key == "autoplay"){
        setAuto(elem.value)
      }
      if(key == "loop"){
        setLoop(elem.value)
      }
      if(key == "vertical"){
        console.log("-vertical--");
        console.log(elem.value)
        // setVertical(elem.value)
      }
      if(key == "indicatorDots"){
        console.log("-indicatorDots--");
        console.log(elem.value)
        setDots(elem.value)
      }
    }
  }
  useEffect(() => {
    let {objCom, objInCom} = handleStyle(styles?.child, {});
    console.log("-----textStyle---");
    console.log(objInCom);
    setComStyle(objCom);
    setInStyle(objInCom);
  }, [styles]);

  useEffect(() => {
    handleAttrs(attrs?.child);
  }, [attrs]);



  return (
    // <View  style={comStyle}  className='he-noticeba'>
    <View  className='he-banner'>
      
      <Swiper
        style={comStyle}
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular={isLoop}
        indicatorDots={isDots}
        autoplay={isAuto}
      >
        
        {
          list.value.map((it) => {
            return (
              <SwiperItem className='swiper-item' key={it.id} >
                <View style={inStyle} className='demo-text-1'>
                  <Image className='img' src={it.image} ></Image>
                </View>
            </SwiperItem>
              
            )
          })
        }
      </Swiper>
    </View>
  )
}

export default HeBanner;